<template>
  <div class="box">
    <h1>组件间通信2: vue自定义事件</h1>


    <!-- 
    绑定的原生事件
      1. 原生标签
      2. 组件标签 + .native  => 是给组件的根标签绑定原生事件
    绑定的自定义事件
      组件标签 默认
    
    事件对象  event/e   ==> 分发事件时, 传递过的数据
      绑定事件时, $event就是事件对象 / 事件回调接收参数默认是事件对象
      原生: 真是对象, 由浏览器在用户操作界面时, 创建的, 用于封装事件相关的数据
            target/keyCode/pageX/pageY   事件数据对象
            浏览器分发事件时, 指定了事件名和数据(event对象)
      自定义: 不一定是对象, 而任意类型, 它是在子组件分发事件时指定的数据
    -->
    <h2>原生事件监听</h2>
    <button @click="test1">原生标签原生DOM事件监听</button>
    <!-- 原生事件对象: 是浏览器分发事件时指定的数据对象(pageX/pageY/target) -->
    <button @click="test2('abc', $event)">原生标签原生DOM事件监听2</button>

    <!-- 绑定给了组件的原生根标签 -->
    <Event1 @click.native ="test3"/>

    <h2>自定义事件监听</h2>
    <p>count: {{count}}</p>
    <Event2 ref="event2" @xxx="test4" @click="test5($event)"/>

  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    data () {
      return {
        count: 0
      }
    },

    mounted () {
      console.log(this.constructor) // VueComponent
      // VC.prototype = Object.create(Vue.prototype);
      // 给event2组件对象绑定自定义事件监听
      this.$refs.event2.$on('xxx', this.test5)
    },

    // beforeDestroy () {
    //   // 解绑事件监听  ===> 此时其实不太需要
    //    this.$refs.event2.$off('xxx')
    // },

    methods: {
      test4 (event) {
        alert(event)
        this.count += event
      },

      test5 (data) {
        console.log('----test5')
        alert(data)
      },


      test1 (event) {
        console.log(event)
        alert(event.target.innerHTML)
      },

      test2 (msg, event) {
        alert(msg + '---' + event.target.innerText)
      },

      test3 (event) {
        /* 
        target: 发生事件的目标元素
        currentTarget: 绑定事件监听的当前目标元素
        */
        // alert(event.target.innerHTML)
        alert(event.currentTarget.innerHTML)
      }
    },

    components: {
      Event1,
      Event2,
    },
  }
</script>
